<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/spxq.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/validform.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/jquery-ui.min.css"/>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js"></script>
		<script src="__PUBLIC__/midi/js/public.js"></script>
		<script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
		<script src="__PUBLIC__/midi/js/validform.js"></script>
		<script src="__PUBLIC__/midi/js/jquery-ui.min.js"></script>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<!--视频页的详细信息-->
		<div class="shipin-datails">
			<div class="con">
				<div class="inner">
					<i></i>
				    <span>当前位置：曲谱教程 &gt; 商品详情</span>
				</div>
			</div>
		</div>
		<div class="wiezhi">
			   <div class="con">
				  <span>当前位置：首页&gt; 曲谱教程&gt; 商品详情</span>
			   </div>
		    </div>
		<!--视频页的详细信息结束-->
		<!--商品详情页的主要内容-->
		<div class="spxq">
			<div class="con">
				<div class="inner">
					<div class="inner-top">
						<div class="inner-top-left">
							<img src="__ROOT__{$info['goods_pic']}"/>
						</div>
						<div class="inner-top-right">
							<div class="right-in">
								<h3>{$info['goods_name']}</h3>
							    <p class="price">&yen; {$info['goods_price']}</p>
							    <p>
									{$info['goods_introduction']}
							    </p>
							</div>
							<if condition="$info['goods_sell_out'] eq 1">
								<a href="javascript:;" class="curpay">立即购买</a>
								<a class="white" id="addcart" >加购物车</a>
							<else />
								<a href="javascript:;">已售罄</a>
								<a class="white" href="{:U('GoodsCart/cart_list')}" >查看购物车</a>
							</if>

						</div>
						<div style="clear:both"></div>
					</div>
					<div class="inner-bottom">
						<!--<h2>教学重点</h2>-->
						<!--<p>1.乐曲演奏</p>-->
						<!--<p>所有曲目按照谱例完整流畅演奏。音色，力度，节奏及技巧能够完整表现。</p>-->
						<!--<p>2.技巧练习</p>-->
						<!--<p>音阶：C与G自然大调与E与A五声音阶的第一把位基本指法</p>-->
						<!--<p>和弦：C自然大调与G自然大调各级开放式</p>-->
						<!--<p>3.乐曲演奏</p>-->
						<!--<p>所有曲目按照谱例完整流畅演奏。音色，力度，节奏及技巧能够完整表现。</p>-->
						<!--<p>4.技巧练习</p>-->
						<!--<p>音阶：C与G自然大调与E与A五声音阶的第一把位基本指法</p>-->
						<!--<p>和弦：C自然大调与G自然大调各级开放式</p>-->
						<!--<p>5.乐曲演奏</p>-->
						<!--<p>所有曲目按照谱例完整流畅演奏。音色，力度，节奏及技巧能够完整表现。</p>-->
						<!--<p>6.技巧练习</p>-->
						<!--<p>音阶：C与G自然大调与E与A五声音阶的第一把位基本指法</p>-->
						<!--<p>和弦：C自然大调与G自然大调各级开放式</p>-->
						<h2 class="info-tel">联系信息</h2>
						<p>咨询电话: 15600520522</p>
					</div>
				</div>
			</div>
		</div>
		   
		<!--商品详情页的主要内容结束-->
		<!--加购物车的弹窗-->
		<div class="cart-overlay">
			<div class="cart-content">
				<div class="title">
					<span class="left">购物车</span>
					<span class="right" id="close">关闭</span>
				</div>
				<div class="cart-main">
					<img src="__PUBLIC__/midi/img/wancheng.png" />
					<p>加入购物车成功</p>
				</div>
				<div class="cart-anniu">
					<a class="left" href="{:U('GoodsCart/cart_list')}">去购物车结算</a>
					<a href="{:U('Tutorial/index')}" class="right">继续购物</a>
				</div>
			</div>
		</div>
		<form action="{:U('Order/sureOrder')}" method="post">
			<input type="hidden" name="idStr" value="{$info['goods_id']}:1">
			<input type="hidden" name="toType" value="1">
		</form>
		<!--加购物车的弹窗结束-->
		<script>
			$('.curpay').click(function () {
				$('form').submit();
            });
			$(function(){
				$("#addcart").on("click",function(){
					var id = "{$info['goods_id']}";
                    $.ajax({
                        url : "{:U('GoodsCart/add_shoppingcart')}",
                        data: {id:id},
                        dataType:'json',
                        success: function(data){
                            $(".cart-overlay").show();
                            $("body").css({
                                'overflow':'hidden'
                            });
                            $(".cart-overlay").css({
                                'overflow-x':'hidden',
                                'overflow-y':'auto'
                            })
                        }
                    });
				})
				$("#close").on("click",function(){
					$(".cart-overlay").hide();
					$("body").css({
						'overflow-y':'auto',
						'overflow-x':'hidden'
					})
				});
			})
		</script>
	</body>
</html>
